<template>
  <el-form
    label-width="105px"
    ref="form_new_date"
    :model="form_new_list"
    :rules="rules"
  >
  <el-card class="box-card" v-if="!route.query.uid || salesStatus == '0' ">
    <template #header>
      <div class="customerTitle1">
        <span class="leve2_title" >原订单信息</span>
      </div>
    </template>
    <div>
      <el-row :gutter="24">
      <el-col v-bind="colLayout" class="successDive">
        <el-form-item label="单据号" prop="order_group_uid" class="displayInput1"  >
          <div @click="queryOrderNumber" class="displayInput">
            <el-input
              class="displayInput2"
              v-model="form_new_list.order_group_uid"
              disabled
            >
              <template #append >
                <vab-icon icon="search-line" />
              </template>
            </el-input>
          </div>

        </el-form-item>
      </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="客户" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.customer_name"
            />
          </el-form-item>
        </el-col>
<!--        <el-col v-bind="colLayout">-->
<!--          <el-form-item label="销售组织" prop="contact_user1">-->
<!--            <el-input-->
<!--              disabled-->
<!--              v-model="form_new_list.contact_user"-->
<!--            />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col v-bind="colLayout">
          <el-form-item label="销售员" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.create_user_name"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="下单时间" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.create_time"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-card>
  <el-card class="box-card">
    <template #header>
      <div class="customerTitle1">
        <span class="leve2_title" >售后信息</span>
      </div>
    </template>
    <div v-if="!route.query.uid || salesStatus == '0' ">
      <el-row :gutter="24">
        <el-col v-bind="colLayout">
          <el-form-item label="售后单号" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.uid"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="创建时间" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.created_at"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="退货原因" prop="contact_user1">
            <el-select v-model="form_new_list.reason" class="m-2" style="width: 100%" clearable>
              <el-option v-for="item in reasonList" :key="item.value"  :disabled="item.display" :label="item.label" :value="item.value">
                <span style="float: left;font-weight: 600;width: 100%;color: rgb(105, 107, 111); cursor: pointer;" v-if="item.label == '自定义'"  @click="transport">{{ item.label }}</span>
                <span style="float: left" v-if="item.label != '自定义'" >{{ item.label }}</span>
              </el-option>
            </el-select>
<!--            <el-input
              v-model.trim="form_new_list.reason"
            />-->
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="备注" prop="contact_user1">
            <el-input
              v-model.trim="form_new_list.remark"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="售后分类" prop="type">
            <VabSelectForm :disabled="route.query.uid"  :clearable="false" v-if="salesSortList.length >0"  v-model="form_new_list.type" :options="salesSortList" @change="salesSortChange"/>
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="运输方式" prop="contact_user1">
            <VabSelectForm v-if="restaurants.length >0"  v-model="form_new_list.express_company" :options="restaurants" />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="快递单号" prop="express_sn">
            <el-input
              v-model.trim="form_new_list.express_sn"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <el-row :gutter="24">
        <el-col v-bind="colLayout" class="successDive">
          <el-form-item label="单据号" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.order_group_uid"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="售后单号" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.uid"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="客户" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.customer_name"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="销售员" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.created_user_name"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="售后分类" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.type_text"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="售后单状态" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.status_text"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="售后登记时间" prop="contact_user1">
            <el-input
              disabled
              v-model="form_new_list.created_at"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="备注" prop="contact_user1">
            <el-input
              v-model.trim="form_new_list.remark"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="运输方式" prop="contact_user1">
            <VabSelectForm v-if="restaurants.length >0"  v-model="form_new_list.express_company" :options="restaurants" />
          </el-form-item>
        </el-col>
        <el-col v-bind="colLayout">
          <el-form-item label="快递单号" prop="express_sn">
            <el-input
              v-model.trim="form_new_list.express_sn"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-card>
    <OrderNumber ref="orderNumberRef" @submit="submitOrder" />
  </el-form>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {ElMessage, ElMessageBox, FormRules} from "element-plus";
import OrderNumber from './OrderNumber.vue'
import salesOrderStore from '../storeList'
import {getRefundAddReasonOption, getRefundOption, getRefundReasonOption} from "/@/api/dms/refund";
import logisticsList from "/@/utils/json/express.json"
import _ from 'lodash'
const route:any = useRoute()
const props = defineProps(['status'])
const salesStatus:any = ref(localStorage.getItem('salesStatus'))
const form_new_date = ref<any>(null)
const form_new_list = ref<any>({})
const rules = ref<FormRules<any>>({
  order_group_uid: [{ required: true, message: '请选择订单', trigger: 'blur' }],
  type: [{ required: true, message: '请选择售后分类', trigger: 'change' }],
  // express_sn:[{ pattern: FormRegTest('transport'), message: '快递单号不正确', trigger: 'blur' }],
})
const colLayout = {    xs: 24,    sm: 12,    md: 8,    lg: 8,    xl: 6, span:8 }
// 退货理由
const reasonList = ref<any>([{value:-1 , label:'自定义',display:true}])
//监听售后分类
const salesOrderStoreList = salesOrderStore()
// 售后分类
const salesSortList = ref<any>([])
// 选择售后分类change事件
const salesSortChange = (value:any)=>{
  // const {salesSortValue ,orderList}:any = salesOrderStoreList ||{}
  const  arr:any = _.cloneDeep(salesOrderStoreList.orderList)
  salesOrderStoreList.set_salesSortValue({label:value,type:2})
  if(arr){
    salesOrderStoreList.set_orderList({...arr,after_item:arr.after_item.map((item:any)=>{return {...item,type:'无'}})})
  }
}
// 选择可售后订单实例
const orderNumberRef = ref<any>(undefined)
// 点击单据号事件
const queryOrderNumber = ()=>{
  orderNumberRef.value.openUp = true
}
//单据号提交事件
const submitOrder =(data:any)=>{
  salesOrderStoreList.set_orderList(data)
  form_new_list.value = {...form_new_list.value,...data.info}
}
// 获取运输方式数据
const restaurants = ref<any>(logisticsList.map((i:any)=>{return {value:i.code,label:i.name}}))
// 自定义退货原因
const transport = (va:any)=>{
  ElMessageBox.prompt(' ', '添加退货原因', {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
    center: true,
    /*inputPattern:
      /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,*/
    inputErrorMessage: 'Invalid Email',
  })
    .then(({ value }) => {
      if(value.trim() !==''){
        form_new_list.value.reason = value
        getRefundAddReasonOption({name:value}).then((data:any)=>{
          if(data.code == 200){
            getRefundReasonOption({}).then((data:any)=>{
              if(data.code == 200){
                const arr = data.data.map((item:any)=> {return {value:item.name,label:item.name,}})
                reasonList.value = [...arr,{value:-1 , label:'自定义',display:true}]
              }
            })
          }
        })
      }
    })
}
const getCustomer=async ()=>{
//筛选项
  await getRefundOption({}).then((data:any)=>{
    if (data.code == 200){
      salesSortList.value = data.data.type
    }
  })
  // 理由原因
  await getRefundReasonOption({}).then((data:any)=>{
    if(data.code == 200){
      const arr = data.data.map((item:any)=> {return {value:item.name,label:item.name}})
      reasonList.value = [...arr,{value:-1 , label:'自定义',display:true}]
    }
  })
}
defineExpose(
  {
    form_new_list,
    form_new_date
  }
)
onMounted(()=>{
  getCustomer()
})
</script>

<style lang="scss" scoped>
.displayInput{
  width:100%;
  :deep(){
    .el-input.is-disabled .el-input__wrapper{
      background-color: #fff !important;
      box-shadow: 0 0 0 1px #dcdfe6 inset  !important;
    }
  }
}
.displayInput1{
  cursor:pointer
}
.displayInput2{
  pointer-events: none
}
.successDive{
  :deep(){
    .el-input-group__append{
      height: 100%;
      background-color: #276ff5;
      box-shadow:none;
      color: #fff;
    }
  }
}
</style>

